<script setup lang="ts">
const props = defineProps<{ shortUrl: string }>();
const emit = defineEmits(["copied", "new"]);

import { useClipboard } from "@vueuse/core";
const { copy, copied, isSupported } = useClipboard();

const hanldeCopy = async () => {
  await copy(props.shortUrl);
  emit("copied");
};
</script>

<template>
  <ClientOnly>
    <Dialog>
      <div class="flex flex-col gap-y-8 p-3">
        <div class="flex justify-between items-center flex-col lg:flex-row">
          <div class="text-xl hidden lg:block">生成成功</div>
          <div class="text-sm text-gray-500">你的短链接已成功生成</div>
        </div>
        <div
          class="flex flex-col justify-between items-center gap-y-4 gap-x-0 lg:gap-x-2 lg:gap-y-0 lg:flex-row"
        >
          <label class="flex justify-start items-center gap-x-1 grow">
            <div class="shrink-0">链接：</div>
            <a
              class="border border-gray-300 rounded group grow px-3 py-1.5 hover:underline hover:decoration-dotted hover:underline-offset-4 hover:decoration-gray-500"
              target="_blank"
              :href="shortUrl"
            >
              {{ shortUrl }}
            </a>
          </label>
          <div class="shrink-0 flex justify-center items-center gap-x-1">
            <button
              class="bg-cyan-700 text-white rounded px-3 py-1.5 flex justify-start items-center gap-x-1"
              :class="{ 'bg-green-700': copied }"
              type="button"
              @click="hanldeCopy"
            >
              <Icon name="uil:copy" size="1.25rem" />
              <div class="" v-if="!copied">复制</div>
              <div class="" v-else>已复制</div>
            </button>
            <button
              class="bg-zinc-300 text-gray-900 rounded px-3 py-1.5 flex justify-start items-center gap-x-1"
              @click="emit('new')"
            >
              <Icon name="uil:file-plus" size="1.25rem" />
              <div>新建</div>
            </button>
          </div>
        </div>

        <div
          v-if="!isSupported"
          class="text-xs text-red-500 text-center lg:text-end lg:text-sm"
        >
          当前环境不支持自动复制，请手动复制
        </div>
      </div>
    </Dialog>
  </ClientOnly>
</template>
